<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .box {
            margin: 150px 0px;
            width: 400px;
            height: 200px;
            background: yellowgreen;
            animation: donghua 2s linear 0s infinite;
            border-radius: 50%;
        }

        /* 定义动画 */
        @keyframes donghua {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="app">
       <button @click="handle">点击切换</button>
       <div class="box" v-if="show"></div>
    </div>
</body>
</html>
<script>
       const VM = new Vue({
        el:'.app',  
        data:{
            show:true
        },
        methods:{
            handle(){
                this.show = ! this.show
            }
        }
     
     
    })





          //v-bind|v-model|v-on|v-if|v-else-if|v-else|v-show
      //v-show:也是Vue框架提供一个指令,可以让元素进行显示与隐藏？【功能与v-if类似】
      //v-show:右侧属性一般需要的是布尔值|JS表达式


      //v-show通过什么实现的显示与隐藏?
      //v-show是通过样式display实现元素的显示（block）与隐藏（none）





      //问题:开发项目的时候,性能的优化手段有哪些?
      //第一:按需加载
      //第二：v-if与v-show在控制元素的显示与隐藏的时候，尽可能使用v-show*****


      //问题:为什么做元素的显示与隐藏的效果，使用v-show性能会优化一些那?
      //v-if：通过创建DOM、移出DOM完成元素的显示与隐藏，会导致浏览器重拍
      //v-show:通过样式display实现元素的显示与隐藏，会导致浏览器重绘。
      //虽然重绘、重排都消耗电脑的性能，但是重绘消耗的性能更少一些。
      //v-show与v-if选择的时候，尽可能使用v-show

</script>



